<template>
  <div :class="prefixCls" :style="getStyle"> </div>
</template>

<script lang="ts" setup name="Line">
  import { computed } from 'vue';
  import type { CSSProperties } from 'vue';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { setStyle } from '/@/utils/cssUtil';
  import { ModuleConfig } from './types';

  const { prefixCls } = useDesign('Line');
  const props = withDefaults(
    defineProps<{
      config?: ModuleConfig;
    }>(),
    {
      config: () => ({
        className: '',
        height: 110,
      }),
    },
  );
  const getStyle = computed((): CSSProperties => {
    return setStyle(props.config);
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-Line';
  .@{prefix-cls} {
    width: 1px;
    height: 111px;
    background-color: #d8d8d8;
  }
</style>
